<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新建作品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="../../../static/back_css/create_works.css" th:href="@{/back_css/create_works.css}" media="all">
</head>
<body>
<!--<div th:if="${flag}==false and ${isSup}!=1" style="margin: 350px 500px;width: 500px"><h3 style="color: red">您没有权限创建作品！如需创建作品请联系活动发布人员！</h3></div>-->
<div id="create_works_main">
    <div class="create_works_content">
          <form class="layui-form">
              <div class="layui-form-item">
              <label class="layui-form-label">真实姓名</label>
               <div class="layui-input-block">
                <input type="text" id="USER_NAME" name="USER_NAME" lay-verify="required"  lay-reqText="真实姓名不能为空！"   autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">年龄</label>
              <div class="layui-input-block">
                  <input type="number" id="AGE" name="AGE" lay-verify="required|number" lay-reqText="年龄不能为空！"   autocomplete="off" placeholder="请输入年龄" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-block">
                  <input type="number" id="TELEPHONE" name="TELEPHONE" lay-verify="required|phone" lay-reqText="手机号码不能为空！"  autocomplete="off" placeholder="请输入手机号码" class="layui-input">
              </div>
          </div>
              <div class="layui-form-item">
                  <label class="layui-form-label">推荐单位</label>
                  <div class="layui-input-block">
                      <input type="text" name="ACTIVITY_IDs" lay-verify="required" th:value="${dis_name}" class="layui-input" readonly>
                      <input type="hidden" name="ACTIVITY_ID" th:value="${dis_id}">
                  </div>
              </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">活动</label>
                    <div class="layui-input-block">
                        <input type="text" name="ACTIVITY_IDs" lay-verify="required" th:value="${ac_name}" class="layui-input" readonly>
                        <input type="hidden"  name="ACTIVITY_ID" th:value="${ac_id}">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">作品名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="WORK_NAME" name="WORK_NAME" lay-verify="required"    lay-reqText="作品名称不能为空！"  autocomplete="off" placeholder="请输入作品名称" class="layui-input">
                    </div>
                </div>
              <div class="layui-form-item ">
                  <label class="layui-form-label">作品描述</label>
                  <div class="layui-input-block">
                      <input type="text" id="WORK_ASSESSMENT" name="WORK_ASSESSMENT" lay-verify="required"    lay-reqText="作品名称不能为空！" maxlength="200"  autocomplete="off" placeholder="请输入作品描述（200字内）" class="layui-input">
                  </div>
              </div>
          <div class="layui-form-item">
              <label class="layui-form-label">上传封面</label><br>
              <div class="layui-input-block">
                  <input type="hidden" name="WORK_IMGURL" id="work_cover">
                  <input type="file" autocomplete="off" name="file1" class="layui-input upload_file" accept="image/*" id="test1">
                  <div class="upload_img layui-upload-list">
                      <img  class="layui-upload-img" id="demo1">
                      <span>请上传PNG、JPG、GIF格式图片</span>
                  </div>
              </div>
          </div>

          <div class="layui-form-item layui-print-mar" >
              <label class="layui-form-label label_width">上传文件</label>
              <div class="layui-input-block">
                  <input type="radio" class="work_type" lay-filter="work_type" name="WORK_TYPE" value="1" title="上传音频"   checked="">
                  <input type="radio" class="work_type" lay-filter="work_type" name="WORK_TYPE" value="0" title="上传视频">
                  <input type="radio" class="work_type" lay-filter="work_type" name="WORK_TYPE" value="2" title="上传图片">

                  <input type="hidden" name="WORK_LENTH" id="work_length">
                  <input type="hidden" name="RESOURCE_URL" id="audio_work_input">
              </div>
              <div class="layui-input-block audio_container " >
                  <span style="color: red;font-size: 1rem">上传文件请控制在200M以内！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button type="button" class="layui-btn layui-btn-audio" id="test6_audio" ><i class="layui-icon"></i>上传</button>
                  <div class="upload_audio">
                    <audio id="audio" src="" controls="controls" style="width: 590px; height: 30px;outline: 0;">

                    </audio>
                  </div>
              </div>
              <div class="layui-input-block video_container" style="display: none;">
                  <span style="color: red;font-size: 1rem">上传文件请控制在200M以内！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button type="button" class="layui-btn layui-btn-audio" id="test6_video" ><i class="layui-icon"></i>上传</button>
                  <div class="upload_audio">
                      <video id="video" src=""  controls="controls" style="width: 590px; height: 200px;outline: 0 ;">

                      </video>
                  </div>
              </div>
              <div class="layui-input-block pic_container" style="display: none;">
                  <span style="color: red;font-size: 1rem">图片最多可上传9张！</span>
                  <span style="color: red;font-size: 0.8rem">（上传作品时请勿其他操作！）</span>
                  <button class="layui-btn" id="add_pic">添加</button>
                  <div class="layui-input-block" id="pic_list">

                  </div>
              </div>
          </div>

          <div class="layui-btn-dom">
              <div class="layui-input-block">
                  <span style="color: red;" >您上传的作品默认为审核通过！请审核后提交！</span>
                  <button class="layui-btn layui-bg-gray layui-btn-radius" type="reset" lay-filter="demo1">重置</button>
                  <button type="button" class="layui-btn layui-bg-orange layui-btn-radius" lay-submit="" lay-filter="confirm">确定</button>
              </div>
          </div>
          </form>
    </div>
</div>
<script type="text/html" id="pic_name_item">

    <div class="layui-input-block pic_item">
        <input type="file" autocomplete="off" name="WORK_IMG" class="layui-input upload_file" accept="image/*">
        <div class="upload_img layui-upload-list upload_jacket_img1">
            <span>请上传PNG、JPG、GIF格式图片</span>
        </div>
        <button class="layui-btn prizename_del">删除</button>
    </div>


</script>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ,upload = layui.upload
            ,$ = layui.jquery;
        form.verify({
            phone: [
                /^((\+86)|(86))?(1[3|4|5|6|7|8])\d{9}$/
                ,'请输入正确手机号'
            ]

        });
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }

        $("#add_pic").click(function (event) {//添加图片

            var s = $("#pic_list").children().length;
            if (s < 9) {

                $("#pic_list").append($("#pic_name_item").html());

                $("#pic_list").each(function (index, item) {
                    $(".prizename_del").on("click", function () {
                        if ($(this).parent(".pic_item")) {
                            $(this).parent(".pic_item").remove();
                        }
                        return false;
                    });
                    $(".upload_file").on("change", function (a, b) {
                        var img = window.URL.createObjectURL(this.files[0]);
                        $(this).next(".upload_jacket_img1").css("content", "url(" + img + ")");
                    });
                })
            } else {
                layer.msg("最多支持添加9张图片！")
            }
            return false;
        });
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/picUpload'
            , method:'post'
            , multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                $(".upload_file>span").css("display","none");
                $(".layui-upload-img").css("display","block");
            }
            ,done: function(res){
                //如果上传失败
                if(res.code == 0){
                    return layer.msg('上传失败');
                }
                $("#work_cover").val(res.pic);
                //上传成功
            }
        });
        var audioIndex;
        upload.render({
            elem: '#test6_audio'
            , url: '/soundUpload'
            , accept:'audio'
            , acceptMime:"audio/*"
            , exts: "mp3|m4a|wma|amr|ape|flac|aac"
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#audio').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                audioIndex=layer.load(1);
            }
            ,done: function(res){
                //console.log(res)
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                layer.close(audioIndex);
            }

        });
        var videoIndex;
        upload.render({
            elem: '#test6_video'
            , url: '/VideoUpload'
            , accept:'file'
            , acceptMime:'video/*'
            , method:'post'
            , multiple: true
            ,choose:function(obj){
                obj.preview(function(index, file, result){
                    $('#video').attr('src', result);
                });
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                videoIndex=layer.load(1);
            }
            ,done: function(res){
                //console.log(res)
                if(res.code == 0){
                    return layer.msg(res.msg);
                }
                $("#audio_work_input").val(res.name);
                $("#work_length").val(res.time);
                layer.close(videoIndex);
            }

        });

        form.on("radio(work_type)",function(data){
            if(data.value=="1"){//音频
                $(".video_container").css("display","none");
                $(".audio_container").css("display","block");
                $(".pic_container").css("display","none");
            }else if(data.value=="0") {//视频
                $(".video_container").css("display", "block");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display","none");
            }else if(data.value=="2") {//图片

                $(".video_container").css("display", "none");
                $(".audio_container").css("display", "none");
                $(".pic_container").css("display","block");
            }
        });

        form.on("submit(confirm)",function (data) {

            if(data.field.WORK_TYPE==2){//图片

            //    ---------------------作品开始--------------------------------------
                var time_info = [];
                $("#pic_list").children(".pic_item").each(function (index, item) {

                    var input=$(item).find("input")[0];
                    if(input.files&&input.files.length>0){

                        time_info.push({
                            WORK_IMG:$(item).find("input")[0].files[0]
                        })
                    }
                });
                alert("正在上传，请稍后，跳转页面之前请勿重复操作！")
                for(var i=0;i<=time_info.length;i++){
                    var url = $("#audio_work_input").val();
                    if(i!=time_info.length){
                        var formData = new FormData();
                        formData.append("file1", time_info[i].WORK_IMG);
                        $.ajax({
                            url:"/picUpload",
                            type:"post",
                            data: formData,
                            contentType: false,
                            processData: false,
                            async: false,
                            success: function(data) {
                                var backurl = data.pic;
                                console.log("返回路径",backurl)
                                if (data.code == 1) {
                                    $("#audio_work_input").val(url+ backurl + ",");
                                } else {
                                    return layer.msg("上传失败！");
                                }
                            },
                            error:function(data) {
                                return layer.msg("上传失败！");
                            }
                        });
                    }else{
                        console.log("总路径",url);
                    }
                }
                data.field.RESOURCE_URL=$("#audio_work_input").val();
            }//音频视频
            if (data.field.WORK_IMGURL == "" || data.field.WORK_IMGURL == null) {
                return layer.msg("请选择一个封面！")
            }
            if (data.field.RESOURCE_URL == "" || data.field.RESOURCE_URL == null) {
                return layer.msg("请选择一个作品！")
            }
            $.get({
                url:"/backUploadWork",
                data:data.field,
                dataType:"json",
                async:false,
                success:function (res) {
                    if(res==0){
                        return layer.msg("上传失败！");
                    }
                    layer.msg("上传成功！");
                    window.location.href='/createWork';

                },
                error:function (res) {
                    return layer.msg("上传失败！");
                }
            })
        })
    })
</script>
</body>
</html>